dkt-py-bot
/

zvirevo_word2vec

Model card Files Files and versions Community

zvirevo_word2vec / models_deploy /templates /index.html

dkt-py-bot

Upload 19 files

7b7289a verified 8 months ago

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>© 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>