Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add api key of multi language #450

Closed
wants to merge 2 commits into from
Closed

add api key of multi language #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d51e25c
add api key of multi language
Aayushibnsl Oct 28, 2024
f8b393f
add placehold jsx file add train number or name in it . give its html…
Aayushibnsl Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 98 additions & 23 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,52 @@
50% {
opacity: 1;
}
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Search Container */
.search-container {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
width: 300px;
margin: 20px auto;
}

/* SVG Icon Styling */
.icon {
margin-right: 10px;
color: #888;
font-size: 1.5em;
}

/* Input Styling */
.search-input {
border: none;
outline: none;
width: 100%;
font-size: 1em;
color: #333;
}

.search-input::placeholder {
color: #aaa;
}

/* Focus Effect */
.search-input:focus + .icon {
color: #007bff;
}

.search-container:hover {
border-color: #007bff;
}


}
Expand Down Expand Up @@ -330,6 +376,19 @@ <h3>Saarthi</h3>
welcomeMessageDisplayed = true; // Set the flag to true after displaying the message
}
});
<h1 id="title">Hello, World!</h1>
<p id="content">This is a multilingual website example.</p>

// Language Selection -->
<select id="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<!-- Add more languages as needed -->
</select>

<script src="language.jsx"></script>

// Predefined questions and answers
// Predefined questions and answers
Expand Down Expand Up @@ -404,7 +463,7 @@ <h3>Saarthi</h3>
}
});

</script> -->
</script>



Expand Down Expand Up @@ -557,31 +616,47 @@ <h3>Saarthi</h3>
requestAnimationFrame(animateCircles);
}
// Start the animation
animateCircles();
</script>

animateCircles()

<div class="search-container">
<svg>
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
class="icon"
height="1em"
width="1em"
>
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
<input type="text" placeholder="Train Name or Train Number" class="search-input">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="placeholder.jsx"></script>
<!--pop up html part-->


<script>
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.style.display = "none";
})
</script>
<script>
window.embeddedChatbotConfig = {
chatbotId: "QAwKOas58trQuGOp1S2cK",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="QAwKOas58trQuGOp1S2cK"
domain="www.chatbase.co"
defer>
</script>
</div>
// <script>
// window.addEventListener("load", () => {
// const loader = document.getElementById("loader");
// loader.style.display = "none";
// })

// </script>
// <script>
// window.embeddedChatbotConfig = {
// chatbotId: "QAwKOas58trQuGOp1S2cK",
// domain: "www.chatbase.co"
// }
// </script>
// <script
// src="https://www.chatbase.co/embed.min.js"
// chatbotId="QAwKOas58trQuGOp1S2cK"
// domain="www.chatbase.co"
// defer>
// </script>
// </div>



Expand Down
27 changes: 27 additions & 0 deletions frontend/placeholder.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';

const SearchBar = () => {
return (
<div className="search-container">
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 512 512"
className="icon"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
<input
type="text"
placeholder="Train Name or Train Number"
className="search-input"
/>
</div>
);
};

export default SearchBar;
134 changes: 79 additions & 55 deletions frontend/src/components/language.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,89 @@
import React, { useState } from 'react';
import translate from 'google-translate-api-x'; // Importing google-translate-api-x
import './language.css'; // Assuming you have your styles in this file
// import React, { useState } from 'react';
// import translate from 'google-translate-api-x'; // Importing google-translate-api-x
// import './language.css'; // Assuming you have your styles in this file

const Language = () => {
const [modalVisible, setModalVisible] = useState(false);
const [languageCode, setLanguageCode] = useState('en'); // Default language is English
// const Language = () => {
// const [modalVisible, setModalVisible] = useState(false);
// const [languageCode, setLanguageCode] = useState('en'); // Default language is English

// Function to handle language selection
const handleLanguageChange = async (e) => {
const selectedLanguage = e.target.value;
setLanguageCode(selectedLanguage);
// // Function to handle language selection
// const handleLanguageChange = async (e) => {
// const selectedLanguage = e.target.value;
// setLanguageCode(selectedLanguage);

// Get all elements that need translation (for simplicity, we assume all text elements)
const elementsToTranslate = document.querySelectorAll('[data-translate]');
// // Get all elements that need translation (for simplicity, we assume all text elements)
// const elementsToTranslate = document.querySelectorAll('[data-translate]');

elementsToTranslate.forEach(async (element) => {
try {
const originalText = element.getAttribute('data-original-text') || element.innerText;
element.setAttribute('data-original-text', originalText); // Store original text
const res = await translate(originalText, { to: selectedLanguage });
element.innerText = res.text; // Set translated text
} catch (error) {
console.error('Translation error:', error);
}
});
};
// elementsToTranslate.forEach(async (element) => {
// try {
// const originalText = element.getAttribute('data-original-text') || element.innerText;
// element.setAttribute('data-original-text', originalText); // Store original text
// const res = await translate(originalText, { to: selectedLanguage });
// element.innerText = res.text; // Set translated text
// } catch (error) {
// console.error('Translation error:', error);
// }
// });
// };

// Function to toggle modal visibility
const toggleModal = () => {
setModalVisible(!modalVisible);
};
// // Function to toggle modal visibility
// const toggleModal = () => {
// setModalVisible(!modalVisible);
// };

return (
<>
{/* Language Icon */}
<div id="languageIcon" title="Change Language" onClick={toggleModal}>
🌐
</div>
// return (
// <>
// {/* Language Icon */}
// <div id="languageIcon" title="Change Language" onClick={toggleModal}>
// 🌐
// </div>

{/* Modal to select language */}
{modalVisible && (
<div id="google_translate_modal" className="flex" onClick={toggleModal}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
{/* Close Button */}
<button className="close-btn" onClick={toggleModal}>✖</button>
// {/* Modal to select language */}
// {modalVisible && (
// <div id="google_translate_modal" className="flex" onClick={toggleModal}>
// <div className="modal-content" onClick={(e) => e.stopPropagation()}>
// {/* Close Button */}
// <button className="close-btn" onClick={toggleModal}>✖</button>

{/* Language Selection */}
<h3>Select Language</h3>
<select value={languageCode} onChange={handleLanguageChange} className='text-black'>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="hi">Hindi</option>
{/* Add more language options as needed */}
</select>
</div>
</div>
)}
</>
);
// {/* Language Selection */}
// <h3>Select Language</h3>
// <select value={languageCode} onChange={handleLanguageChange} className='text-black'>
// <option value="en">English</option>
// <option value="es">Spanish</option>
// <option value="fr">French</option>
// <option value="de">German</option>
// <option value="hi">Hindi</option>
// {/* Add more language options as needed */}
// </select>
// </div>
// </div>
// )}
// </>
// );
// };

// export default Language;
const apiKey = "YOUR_API_KEY";
const translateText = (text, targetLang) => {
return fetch(`https://translation.googleapis.com/language/translate/v2?key=${apiKey}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
q: text,
target: targetLang,
}),
})
.then(response => response.json())
.then(data => data.data.translations[0].translatedText)
.catch(error => console.error("Error:", error));
};

export default Language;
document.getElementById("language-select").addEventListener("change", async (event) => {
const targetLang = event.target.value;
const title = document.getElementById("title");
const content = document.getElementById("content");

// Translate each element's text
title.innerText = await translateText(title.innerText, targetLang);
content.innerText = await translateText(content.innerText, targetLang);
});