Spaces:
Running
Running
| <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/favicon.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-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> | |
| <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="https://djacon.github.io"> | |
| <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> | |
| <button 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" | |
| onclick="change_theme()"> | |
| <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 id='theme-span' class="mx-3 font-medium">Set Light Theme</span> | |
| </button> | |
| </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> | |
| <style> | |
| #search:focus { | |
| border: 1px solid #ffa116; | |
| } | |
| </style> | |
| <input id="search" x-model="search" type="text" | |
| class="w-44 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-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="https://djacon.github.io"> | |
| 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> | |
| <a href="https://github.com/Djacon/text2feature" target="_blank" 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 hover:bg-gray-100" 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;"> | |
| <div class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform"> | |
| <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> | |
| </div> | |
| </a> | |
| </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="hover:underline" style="color: #ffa116;">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 File</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 File</span> | |
| <input id="sum-file-input" type="file" accept=".pdf, .txt" 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"> | |
| <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> | |
| <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> | |
| <style> | |
| textarea.disabled { | |
| background-color: transparent; | |
| pointer-events: none; | |
| } | |
| </style> | |
| <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 id="extracted-text" | |
| class="disabled 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 id="summarized-text" | |
| class="disabled 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> | |
| if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| localStorage.theme = 'dark'; | |
| document.documentElement.classList.add('dark'); | |
| document.getElementById('theme-span').innerText = 'Set Light Theme'; | |
| } else { | |
| localStorage.theme = 'light'; | |
| document.documentElement.classList.remove('dark'); | |
| document.getElementById('theme-span').innerText = 'Set Dark Theme'; | |
| } | |
| function change_theme() { | |
| if (localStorage.theme === 'dark') { | |
| localStorage.theme = 'light'; | |
| document.documentElement.classList.remove('dark'); | |
| document.getElementById('theme-span').innerText = 'Set Dark Theme'; | |
| } else { | |
| localStorage.theme = 'dark'; | |
| document.documentElement.classList.add('dark'); | |
| document.getElementById('theme-span').innerText = 'Set Light Theme'; | |
| } | |
| } | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script> | |
| <script src="js/summarizer.js"></script> | |
| </body> | |
| </html> |