text2feature / static /grammar_checker.html
Djacon's picture
Update hotkeys
0028406
<!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 | Grammar</title>
<link rel="stylesheet" href="files/css/main.css">
<link rel="icon" type="image/svg+xml" href="files/images/favicon.svg">
<script defer src="files/js/main.js"></script>
</head>
<body class="overflow-hidden">
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(95744490, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/95744490" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<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="dark-block 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="/" class="flex items-center">
<img class="w-auto h-8 no-invert" src="files/images/favicon.svg" alt="logo">
<span class="mx-3 mt-1 font-medium text-lg">Text2<span class="no-invert" 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="/">
<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">
<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">
<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="currentColor" 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="currentColor"/>
<ellipse cx="9" cy="10.5" rx="1" ry="1.5" fill="currentColor"/>
<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="currentColor" 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="analytics">
<svg fill="currentColor" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" 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="M29.5 7c-1.381 0-2.5 1.12-2.5 2.5 0 0.284 0.058 0.551 0.144 0.805l-6.094 5.247c-0.427-0.341-0.961-0.553-1.55-0.553-0.68 0-1.294 0.273-1.744 0.713l-4.774-2.39c-0.093-1.296-1.162-2.323-2.482-2.323-1.38 0-2.5 1.12-2.5 2.5 0 0.378 0.090 0.732 0.24 1.053l-4.867 5.612c-0.273-0.102-0.564-0.166-0.873-0.166-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5c1.381 0 2.5-1.119 2.5-2.5 0-0.332-0.068-0.649-0.186-0.939l4.946-5.685c0.236 0.073 0.48 0.124 0.74 0.124 0.727 0 1.377-0.316 1.834-0.813l4.669 2.341c0.017 1.367 1.127 2.471 2.497 2.471 1.381 0 2.5-1.119 2.5-2.5 0-0.044-0.011-0.086-0.013-0.13l6.503-5.587c0.309 0.137 0.649 0.216 1.010 0.216 1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5z"></path>
</g>
</svg>
<span class="mx-3 font-medium capitalize">Analytics</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="grammar_checker">
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32" xml:space="preserve" width="24" height="24">
<style type="text/css">
.st0{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M27,29H7c-1.1,0-2-0.9-2-2v0c0-1.1,0.9-2,2-2h20l0-22H8C6.3,3,5,4.3,5,6v21"/>
<polyline class="st0" points="11,19 16,9 21,19 "/>
<line class="st0" x1="13" y1="16" x2="19" y2="16"/>
</svg>
<span class="mx-3 font-medium capitalize">Grammar Checker</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 id="theme-btn" 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">
<img id="img-theme" src="files/images/sun.svg" width="24" height="24">
<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="static bg-white border-b border-gray-100">
<div class="dark-block 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 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"
placeholder="Find anything...">
</div>
<div class="dark-block 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">
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">
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="analytics">
Analytics
</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="grammar_checker">
Grammar Checker
</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="files/images/github-mark.svg" alt="github-mark">
</button>
<a href="https://github.com/Djacon" target="_blank" class="border github-block dark-block absolute right-0 z-20 w-56 py-1 mt-2 overflow-hidden bg-white rounded-md 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;">
<div class="flex items-center p-3 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="files/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">Grammar Checker</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 no-invert" style="color: #ffa116">Grammar Checker</a>
</div>
</div>
<div class="mt-6">
<div class="dark-block rounded-lg w-full p-4 bg-white xl:p-6">
<ul class="flex text-sm text-center text-gray-500 divide-x divide-gray-200">
<li class="w-full">
<button id="show-original" class="bg-gray-100 rounded-l-lg inline-block w-full p-2 text-gray-900 hover:bg-gray-100">Original</button>
</li>
<li class="w-full">
<button id="show-summary" class="inline-block rounded-r-lg w-full p-2 hover:text-gray-700 hover:bg-gray-100">Summary</button>
</li>
</ul>
<div id='sum-original' class="mt-6 space-y-5" onsubmit="return false;">
<div id="sum-text-div">
<textarea id="sum-text-input" required class="bg-gray-100 block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md"
style="min-height: 250px;" placeholder="Enter or upload your text and press &quot;Check&quot;"></textarea>
</div>
<p id='sum-err' class="no-invert hidden mt-2 text-sm text-red-500"></p>
<div class="flex justify-between no-invert">
<label id="word-counter" class="hidden flex items-center py-2 px-4 text-gray-500 rounded">Words:</label>
<label id="sum-file-div" class="flex items-center py-2 px-4 text-gray-500 rounded cursor-pointer hover:text-gray-700">
<svg class="w-6 h-6" 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="px-2">Upload</span>
<input id="sum-file-input" type="file" accept=".pdf, .txt" class="hidden">
</label>
<button id="submit" class="w-32 sm:w-80 flex items-center justify-center py-2 px-4 rounded font-medium text-white rounded-full"
style="max-height: 2.5rem;">
Check
</button>
</div>
</div>
<div id="sum-summary" class='hidden mt-6 space-y-5'>
<div class="hidden 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="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"></textarea>
</div>
<div class="w-full md:w-1/2 grid-cols-2 mt-6">
<textarea id="summarized-text"
class="bg-gray-100 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"
style="min-height: 270px;"></textarea>
</div>
</div>
</div>
<section class="mt-6 space-y-6">
<div class="dark-block w-full p-4 bg-white rounded-lg xl:p-6">
<h2 class="text-lg font-medium text-gray-700 sm:text-xl md:text-2xl">
About
</h2>
<p class="mt-4 font-medium text-gray-700">
Project on checking text for mistakes (Syntax, Semantic or Morphologic) using a neural network
</p>
<p class="mt-4 font-medium text-gray-700">
Key Features:
</p>
<ul class="mt-2 text-gray-800" style="list-style-type: disc; list-style-position: inside;">
<li>Intuitive UI (User Interface)</li>
<li>Automated grammar checker for texts of varying lengths (text must be less than 20K characters)</li>
<li>Hotkeys: press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> to <b>Check</b>, press <kbd>PgUp/Home</kbd> or <kbd>PgDn/End</kbd> to <b>switch between tabs.</b></li>
</ul>
<p class="mt-4 text-gray-800">
If you want to learn more about the project, here is a link to the github repository: <a class="text-indigo-700 no-invert hover:text-gold" href="https://github.com/Djacon/mbert-gram" target="_blank">Djacon/mBert-Gram</a>
</p>
</div>
</section>
</div>
</div>
</main>
</div>
</div>
<script src="files/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
<script src="files/js/grammar.js"></script>
</body>
</html>