Skip to content

Instantly share code, notes, and snippets.

@tezansahu

tezansahu/janus_popup.html

Created April 23, 2022 22:29
Show Gist options
  • Save tezansahu/e3dd83a4c638d58efe3db081d1b3dfc3 to your computer and use it in GitHub Desktop.
Save tezansahu/e3dd83a4c638d58efe3db081d1b3dfc3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
janus_popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Use Bootstrap 5 by loading it as a stylesheet from jsDelivr, a free open source CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Janus AI: Paraphrasing Tool</title>
</head>
<body style="width: 400px; max-height:fit-content" class="pb-2">
<div class="container-fluid text-center mt-1">
<img src="../assets/icons/icon.png" width="150px">
<div id="paraphrase" class="mb-2">
<div id="paraphrase_card" class="card">
<div class="card-header">
<h5>Smart Paraphrasing Solution</h5>
</div>
<div class="card-body">
<div id="text_input">
<!-- Textarea to contain the user's text input -->
<textarea class="form-control m-2" style="font-size: small;" rows="5" id="input_text" placeholder="Select some text on any page or write/paste something..."></textarea>
<button id="submit_text" class="btn btn-info m-2">Rephrase</button>
<!-- Textarea to contain the paraphrased text returned by the server.
This should be displayed only after the server returns data. Hence, display
is initially set to 'none' -->
<div id="paraphrased_result" style="display: none;">
<textarea class="form-control m-2" style="font-size: small;" rows="5" id="paraphrased_text" placeholder="Paraphrased result..."></textarea>
<!-- Synonyms of keywords in the paraphrased text will be dynamically populated here -->
<div id="kw_syn_div" class="mt-3"></div>
</div>
<!-- Spinner to be shown while the paraphrased output and synonyms are being fetched from the server -->
<div id="loading" class="mt-3" style="display: none;">
<div class="mb-1" id="loading_text"></div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</div>
<!-- To display any error that might be thrown -->
<div id="error_box" class="alert alert-danger m-2 mt-3" role="alert" style="display:none"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Include the JavaScript for functionality -->
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment