Hugging Face's logo

dkt-py-bot
/
zvirevo_word2vec

Model card Files
xet
 Community
zvirevo_word2vec / models_deploy /templates /index.html
dkt-py-bot's picture
dkt-py-bot
Upload 19 files
7b7289a verified
raw
history blame contribute delete
14.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>zvirevo</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 <link href="https://fonts.googleapis.com/css2?family=Jacques+Francois+Shadow&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Kavoon&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 1. WELCOME SECTION-->
 <section id="welcome" class="welcome">
 <!-- header -->
 <header>
 <!-- navigation bar -->
 <nav>
<!-- logo -->
 <div class="logo">
 <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Example Image">
 <!-- <img src="images/logo.png" alt=""> -->
 <p>Zvirevo</p>
 </div>
<!-- headings -->
 <ul>
 <li><a href="#welcome">About</a></li>
 <li><a href="#embeddings">Embeddings</a></li>
 <li><a href="#computations">Computations</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </nav>
 <hr>
 </header>
<!-- welcome message -->
 <div class="welcomeMsg">
 <img src="{{ url_for('static', filename='images/welcome.png') }}" alt="Example Image">
 <!-- <img src="images/welcome.png" alt=""> -->
 <div class="rectangle"></div>
 <h1>Welcome to <span style="color:rgb(163, 46, 199)">Zvirevo</span></h1>
<div class="container">
 <div class="ellipse"></div>
<div class="ellipse top">
 <div class="text">Increasing accessibility and functionality of <span style="color:rgb(171, 10, 203)">AI</span> through enhancing NLP capabilities for agglutinitive <span style="color:rgb(171, 10, 203)">African languages</span> with complex morphologies.
 </div>
 </div>
 </div>
</div>
</section>
<!-- 2. EMBEDDINGS SECTION-->
 <section id="embeddings">
 <h1>Perform Word <br><span style="color:rgb(163, 46, 199)">Embeddings</span></h1>
 <img src="{{ url_for('static', filename='images/nlp.png') }}" alt="NLP Image">
<div class="generate">
 <form id="embeddingForm" class="word">
 <div class="word">
 <div class="type-word">
 <input type="text" id="wordInput" placeholder="Enter the word here e.g. mukadzi" required>
 </div>
<div class="btns1">
 <!-- Choose model -->
 <div class="model">
 <label for="modelSelect">Choose model</label>
 <select id="modelSelect" name="modelSelect" required>
 <!-- <option value="" disabled selected>Select a model</option> -->
 <option value="word2vec">Word2Vec</option>
 <option value="fasttext">FastText</option>
 </select>
 </div>
<!-- Select top words -->
 <div class="top-n">
 <label for="topNSelect">Top-n</label>
 <select id="topNSelect" name="topNSelect" required>
 <!-- <option value="" disabled selected>Select number of similar words</option> -->
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>
 </div>
<!-- Submit -->
 <div class="submit-btn">
 <button type="submit">Submit</button>
 </div>
 </div>
 </div>
 </form>
<div class="result1">
 <div class="result-title">
 <h2>Results</h2>
 </div>
<div class="outcome">
 <ul id="resultsList">
 <!-- Results will be dynamically inserted here -->
 </ul>
 </div>
 </div>
 </div>
 </section>
<!-- 3. COMPUTATIONS SECTION-->
<section id="computations">
 <h1>Perform Word <br><span style="color:rgb(163, 46, 199)">Computations</span></h1>
 <img src="{{ url_for('static', filename='images/nlp.png') }}" alt="Example Image">
 <!-- <img src="images/nlp.png" alt=""> -->
<div class="generate">
 <form id="computationForm" class="word">
 <div class="word">
 <div class="type-word">
 <input id="expressionInput" type="text" placeholder="Enter expression e.g. vana + vasikana - vakomana" required>
 </div>
 <div class="btns1">
 <!-- Choose model -->
 <div class="model">
 <label for="modelSelectComputation">Choose model</label>
 <select id="modelSelectComputation" name="modelSelectComputation" required>
 <option value="word2vec">Word2Vec</option>
 <option value="fasttext">FastText</option>
 </select>
 </div>
 <!-- Select top words -->
 <div class="top-n">
 <label for="topNSelectComputation">Top-n</label>
 <select id="topNSelectComputation" name="topNSelectComputation" required>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 </select>
 </div>
 <!-- Submit -->
 <div class="submit-btn">
 <button type="submit">Submit</button>
 </div>
 </div>
 </div>
 </form>
 <div class="result2">
 <div class="result-title">
 <h2>Results</h2>
 </div>
 <div class="outcome">
 <ul id="computationResultsList">
 <!-- Results will be dynamically inserted here -->
 </ul>
 </div>
 </div>
</div>
</section>
<!-- 4. CONTACT SECTION-->
 <section id="contact">
<!-- personal details on collaborators-->
 <div class="personal-info">
 <div class="people">
 <div class="daisy">
 <img src="{{ url_for('static', filename='images/daisy.png') }}" alt="Example Image">
 <!-- <img src="images/daisy.png" alt=""> -->
 <div class="daisy-bio">
 <p>Hello! <br>
 "I'm Daisy, a passionate innovator in the tech world.
Creating this project has been an incredibly fulfilling journey for me."
 </p>
 </div>
</div>
<div class="ruva">
 <img src="{{ url_for('static', filename='images/ruva.png') }}" alt="Example Image">
 <!-- <img src="images/ruva.png" alt=""> -->
 <div class="ruva-bio">
 <p>
 Hi there, <br> “I'm Ruva, a tech ethusiast.
Building this project was the most beautiful thing i have ever done in my life”
</p>
 </div>
</div>
</div>
<hr>
<div class="form-container">
 <form id="contactForm" action="/submit" method="POST">
 <h2>Contact Us</h2>
 <hr>
<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" id="name" name="name" required>
 </div>
<div class="form-group">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 </div>
<div class="form-group">
 <textarea id="message" name="message" rows="4" required placeholder="Type message ... "></textarea>
 </div>
<div class="form-group checkbox-group">
 <label>
 <input type="checkbox" name="subscribe" checked> Subscribe to our newsletter
 </label>
 </div>
<button type="submit">Submit</button>
 <div id="responseMessage"></div>
 </form>
 </div>
</div>
<footer>
 <p>&copy; zvirevo 2024</p>
 <div class="social-media-icons">
 <a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
 <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
 <a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
 <a href="https://www.linkedin.com/in/daisy-tsenesa-577b5a221/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
 <a href="https://github.com/daisy-py-bot" target="_blank"><i class="fab fa-github"></i></a>
 </div>
</footer>
 </section>
</body>
<script>
 // Get the form for the word embeddings
 document.getElementById('embeddingForm').addEventListener('submit', function(e) {
 e.preventDefault();
 const word = document.getElementById('wordInput').value;
 const modelType = document.getElementById('modelSelect').value;
 const topN = document.getElementById('topNSelect').value;
 fetch('/get_similar_words', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ word: word, model_type: modelType, top_n: topN })
 })
 .then(response => response.json())
 .then(data => {
 const resultsList = document.getElementById('resultsList');
 resultsList.innerHTML = ''; // Clear previous results
 if (data.error) {
 resultsList.innerHTML = `<li>Error: ${data.error}</li>`;
 } else {
 data.similar_words.forEach(item => {
 const listItem = document.createElement('li');
 listItem.textContent = `${item[0]}: ${item[1].toFixed(4)}`;
 resultsList.appendChild(listItem);
 });
 }
 })
 .catch(error => console.error('Error:', error));
 });
 // Get the form from the word computations
 document.getElementById('computationForm').addEventListener('submit', function(e) {
 e.preventDefault();
 const expression = document.getElementById('expressionInput').value;
 const modelType = document.getElementById('modelSelectComputation').value;
 const topN = document.getElementById('topNSelectComputation').value;
 fetch('/compute', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ expression: expression, model: modelType, top_n: topN })
 })
 .then(response => response.json())
 .then(data => {
 const computationResultsList = document.getElementById('computationResultsList');
 computationResultsList.innerHTML = ''; // Clear previous results
 if (data.error) {
 computationResultsList.innerHTML = `<li>${data.error}</li>`;
 } else {
 data.forEach(item => {
 const listItem = document.createElement('li');
 listItem.textContent = `${item.word}: ${item.similarity.toFixed(4)}`;
 computationResultsList.appendChild(listItem);
 });
 }
 })
 .catch(error => console.error('Error:', error));
 });
 // Send email
 document.getElementById('contactForm').addEventListener('submit', function(event) {
 event.preventDefault(); // Prevent the default form submission
 const formData = new FormData(this);
 fetch('/submit', {
 method: 'POST',
 body: formData
 })
 .then(response => response.json())
 .then(data => {
 document.getElementById('responseMessage').innerText = data.message;
 })
 .catch(error => {
 console.error('Error:', error);
 document.getElementById('responseMessage').innerText = 'An error occurred. Please try again.';
 });
 });
 </script>
</html>