Can you improve this code and include greater mobile and desktop options also add a live active working ChatGPT chatbot that models the huggingface yuntian-deng I perfer to use free open source code and web resources here is the code please optimize and rewrite adding new functions:

<html lang=“en”>

<head>

<title>Media Center</title>

<meta charset=“UTF-8” />

<meta name=“viewport” content=“width=device-width,initial-scale=1” />

<meta name=“description” content=“” />

<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.2.2
/dist/css/bootstrap.min.css” rel=“stylesheet” crossorigin=“anonymous”>

<link rel=“icon” type=“image/x-icon” href=“https://www.connectplustherapy.com/wp-content/uploads/2018/04/favicon-free-img.png”>

<meta name=“theme-color” content=“”>

<meta property=“og:title” content=“” />

<meta property=“og:description” content=“” />

<meta property=“og:image” content=“” />

<meta name=“twitter:card” content=“”>

<meta name=“twitter:site” content=“”>

<meta name=“twitter:title” content=“”>

<meta name=“twitter:description” content=“”>

<meta name=“twitter:image” content=“”>

</head>

<body>

<div id=“loader-wrapper”>

<div class=“loader”></div>

</div>

<style>

/* For best practice, move CSS below to an external CSS file. */

@keyframes rotation {

0% {

transform: rotate(0deg); }

100% {

transform: rotate(360deg); } }

#loader-wrapper {

background-color: #FFFFFF;

position: fixed;

z-index: 999;

width: 100%;

height: 100%;

text-align: center; }

.loader {

width: 40px;

height: 40px;

border: 5px solid #000000;

border-bottom-color: transparent;

border-radius: 50%;

margin-top:calc(50vh - 20px);

display: inline-block;

box-sizing: border-box;

-webkit-animation: rotation 1s linear infinite;

animation: rotation 1s linear infinite; }

</style>

<!-- " Alternative “
<link rel=“icon” type=“image/x-icon” href=“https://img.favpng.com/16/9/17/ico-world-wide-web-download-icon-png-favpng-ERCwfvfkTsqXruT7t79nTgkYT.jpg”>
–>

<center> <h1> The Media Center </h1></center>

<!–

<object data=“https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.mIQHRsoHGAonxoIs0VYIDAHaDq%26pid%3DApi&f=1” width=“100%” height=“250px” type=“text/html”>
</object>
–>

</head>
<body>
<iframe style=“border:1px #FFFFFF none” src=“https://pluto.tv/en/live-tv/pluto-tv-comedy” title=“iFrame” width=“100%” height=“425px” scrolling=“no” frameborder=“no” allow=“fullscreen”></iframe>

<br>




<h2><br><br> Greetings</h2>

<p1><br>Welcome to the “Media Center” depository to ensure that you have a more enjoyable experience, there are a few items I would recommend that you download to your device. Some of the item maybe available for download in the application section.<a href=“https://drive.google.com/drive/folders/0B_0S3NAX3GAzbGYzYjJQemVHeEk?resourcekey=0-1CSqFJ6v7hWzbXR_5PGBQg”>Click Here</a><p/> </p1>








<h3><br> For Android TV - From Playstore:</h3> <h4> <p><a href=“https://play.google.com/store/games?device=tv”>Click Here</a><p/>


<br>
X-VPN or “your choice” ,
TV Web Browser, or WEB browser,
Pluto TV,
X-plore,
YoWindow,
Aptoide TV,
Sony Crackle Movies,
Tubi TV,
VUDU
</br>

<h3> For Android Mobile - From Playstore:</h3> <h4> <p><a href=“https://play.google.com/store/games?device=phone”>Click Here</a><p/>






<center> <p>

<button type=“button” id=“open-popup” data-href=“https://flixtor.to/”>Watch Flixtor</button>

</p>
</center>


<center>

<form action=“https://therokuchannel.roku.com/”>
<p> <button type=“submit”>Watch Roku</button> </p>
</form>

</center>

<center>

<form action=“https://www.xumo.tv/networks”>
<p> <button type=“submit”>Watch Xumo</button> </p>
</form>

</center>

<center>

<form action=“https://tubitv.com/category/featured”>
<p> <button type=“submit”>Watch Tubi</button> </p>
</form>

</center>

<center>

<form action=“https://tubitv.com/category/featured”>
<p> <button type=“submit”>Watch Tubi</button> </p>
</form>

</center>

<center>

<form action=“https://tubitv.com/category/featured”>
<p> <button type=“submit”>Watch Tubi</button> </p>
</form>

</center>

<center>

<form action=“https://tubitv.com/category/featured”>
<p> <button type=“submit”>Watch Tubi</button> </p>
</form>

</center>



<center>

<form action=“https://dsc-online.asuscomm.com/content/media”>
<p> <button type=“submit”>Access Folder</button> </p>
</form>

</center>



<center>

<form action=“https://dsc-online.asuscomm.com:8443/Main_Login.asp”>
<p> <button type=“submit”>Access Server</button> </p>
</form>

</center>






<center>
<div class=“container”>
<!-- width=“560” height=“315” -->

<iframe class=“responsive-iframe” src=“https://www.youtube.com/embed/k4D7cuDAvXE” title=“YouTube video player” frameborder=“0” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

</div>
</center>









<div id=“cookie-notice” class=“w-100 bg-dark text-white pt-3 px-4 pb-1 position-fixed” style=“z-index: 1000; bottom: 0;”>

<div class=“container p-2”>

<div class=“row”>

<div class=“col-sm-8 col-md-9”>

<p class=“p-2”>This website uses cookies so that we can provide you with the best website experience. By clicking “I Accept” you acknowledge the use of cookies and to our <a href=”#“><u>Privacy Policy</u></a>.</p>

</div>

<div class=“col-sm-4 col-md-3”>

<a class=“i-accept btn btn-primary m-2”>I Accept</a>

</div>

</div>

</div>

</div>

<!–[if IE]><div class=“w-100 text-center bg-dark text-white pt-3 px-4 pb-1 position-fixed” style=“z-index: 1000; bottom: 0;”><p onClick=“parentNode.remove()”>Please use a modern browser for a better browsing experience. <span class=“float-right”>X</span></p></div><![endif]–>

<script src=“https://code.jquery.com/jquery-3.6.1
.min.js” crossorigin=“anonymous”></script>

<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.2.2
/dist/js/bootstrap.bundle.min.js” crossorigin=“anonymous”></script>

<script type=“text/javascript”>

(function(){

(‘.i-accept’).on(‘click’, function() {

if(localStorage.noshow !== ‘1’) {

('#cookie-notice').addClass('d-none');

localStorage.noshow='1';

}

});

if(localStorage.noshow == '1') {

(‘#cookie-notice’).addClass(‘d-none’);

};

})(jQuery);

</script>

<script type=“text/javascript”>

(window).on('load', function() {

(”#loader-wrapper").fadeOut(700);

});

</script>

<script>
(() => {
let id = document.getElementById(“open-popup”);
let popupWindow = null;
let windowSize = ‘width=800,height=500,left=112,top=134’;

id.addEventListener(“click”, function(event){
let url = this.dataset.href;
if (popupWindow === null || popupWindow.closed) {
popupWindow = window.open(url, ‘Flixtor’, windowSize);
} else {
popupWindow.focus();
}
event.preventDefault();
});
})();
</script>





</body>

<footer>
<p> </p>
</footer>

</html>
<!-- comments here -->


<!–
9anime - Largest anime library: https://9anime.me/
Zoro - Soft sub, modern website: https://zoro.to/
Animepahe - Mini encodes, nice for download: https://animepahe.ru/
Gogoanime - Our main stream source: https://gogoanime.news/
Crunchyroll - Largest licensed library, safe & reliable place (won’t shutdown): https://crunchyroll.com/
Reddit list - More detailed list of other streaming services: https://www.reddit.com/r/StreamingAnime/comments/wcn0rt/top_streaming_services_to_watch_anime/
https://myanimelist.net/watch/episode


–>




<!--
- Livechart - Airing schedule: https://livechart.me/
- Chiaki -Series release order: https://chiaki.site/?/tools/watch_order
- MyAnimeList - Anime info data, popularity, rating, etc: https://myanimelist.net/
- Jikan - MAL Search: https://jikan.moe/
- AniList - Genre tags: https://anilist.co/
- Disqus - Comments section: https://disqus.com/
- Gogoanime - GOGO Stream: https://gogoanime.news/
- Allanime - AL Stream: https://allanime.site/
- Animerush - RUSH Stream: https://www.animerush.tv/
- Kawaiifu - Some uncensored stream: https://kawaiifu.com/
- Manga reader - Manga links: https://mangareader.to/
- ComicK - Manga links: https://comick.app/
–>
Here’s an optimized version of your code with new functionalities added:

<!DOCTYPE html>
<html lang=“en”>

<head>
<title>Media Center</title>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width,initial-scale=1” />
<meta name=“description” content=“” />
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css” rel=“stylesheet” crossorigin=“anonymous”>
<link rel=“icon” type=“image/x-icon” href=“https://www.connectplustherapy.com/wp-content/uploads/2018/04/favicon-free-img.png”>
<meta name=“theme-color” content=“”>
<meta property=“og:title” content=“” />
<meta property=“og:description” content=“” />
<meta property=“og:image” content=“” />
<meta name=“twitter:card” content=“”>
<meta name=“twitter:site” content=“”>
<meta name=“twitter:title” content=“”>
<meta name=“twitter:description” content=“”>
<meta name=“twitter:image” content=“”>
<style>
/* For best practice, move CSS below to an external CSS file. */
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#loader-wrapper {
background-color: #FFFFFF;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
}

.loader {
width: 40px;
height: 40px;
border: 5px solid #000000;
border-bottom-color: transparent;
border-radius: 50%;
margin-top: calc(50vh - 20px);
display: inline-block;
box-sizing: border-box;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}

.responsive-iframe {
max-width: 100%;
height: auto;
}

@media screen and (max-width: 600px) {
h1 {
font-size: 1.5rem;
}

h2 {
font-size: 1rem;
}

p1 {
font-size: 0.8rem;
}

button {
padding: 0.5rem 1rem;
}
}
</style>

<script src=“https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.9.0/dist/tf.min.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder@4.2.0/dist/universal-sentence-encoder.min.js”></script>
<script>
let chatbot_model;

async function loadChatbotModel() {
chatbot_model = await tf.loadGraphModel(‘https://tfhub.dev/tensorflow/transformer/4’);
}

loadChatbotModel(); // Call the function to load the model as soon as the script is loaded.

async function chatBotResponse(input) {
let use = await use.load(); // Load the Universal Sentence Encoder model.
let embeddings = use.embed(input); // Get the embeddings for the input.
let input_tensor = tf.tensor(embeddings.arraySync()); // Convert the embeddings to a tensor.
let decoder_input = tf.ones([1, 1], ‘int32’); // Create the initial input.

// Loop to generate the output.
let sentences = [];
let i = 0;
while (i < 50) {
let logits = chatbot_model.predict([input_tensor, decoder_input, tf.zeros([1, 1, 4])]);
let index = tf.argMax(logits.squeeze(), -1).arraySync()[0];
let sentence = String.fromCharCode(index);
if (sentence == ‘\n’) {
break;
}
sentences.push(sentence);
i++;
decoder_input = tf.concat([decoder_input, tf.ones([1, 1], ‘int32’).mul(index)], 1);
}
return sentences.join(‘’).trim(); // Return the generated response.
}

async function sendMessage() {
let message_input = document.getElementById(‘message-input’);
if (message_input.value.trim() == ‘’) {
return;
}
let chatbox = document.getElementById(‘chatbox’);
let user_message = document.createElement(‘p’);
user_message.className = ‘text-start mb-2’;
user_message.innerText = message_input.value.trim();
chatbox.appendChild(user_message);
let chatbot_message = document.createElement(‘p’);
chatbot_message.className = ‘text-end mb-2’;
chatbot_message.innerText = ‘Loading…’;
chatbox.appendChild(chatbot_message);
message_input.value = ‘’;
chatbot_message.scrollIntoView(); // Scroll to the chatbot message.
let response = await chatBotResponse(user_message.innerText);
if (response.trim() == ‘’) {
chatbot_message.innerText = ‘Sorry, I didn’t understand that.’;
} else {
chatbot_message.innerText = response;
}
chatbot_message.scrollIntoView(); // Scroll to the chatbot message.
}
</script>
</head>

<body>
<div id=“loader-wrapper”>
<div class=“loader”></div>
</div>
<header>
<nav class=“navbar navbar-expand-lg navbar-light bg-light”>
<div class=“container-fluid”>
<a class=“navbar-brand” href=“#”><img src=“https://www.connectplustherapy.com/wp-content/uploads/2018/04/favicon-free-img.png” alt=“Logo” height=“30”></a>
<button class=“navbar-toggler” type=“button” data-bs-toggle=“collapse” data-bs-target=“#navbarNav” aria-controls=“navbarNav” aria-expanded=“false” aria-label=“Toggle navigation”>
<span class=“navbar-toggler-icon”></span>
</button>
<div class=“collapse navbar-collapse” id=“navbarNav”>
<ul class=“navbar-nav”>
<li class=“nav-item”>
<a class=“nav-link” href=“#”>Home</a>
</li>
<li class=“nav-item”>
<a class=“nav-link” href=“#”>Media</a>
</li>
<li class=“nav-item”>
<a class=“nav-link” href=“#”>Apps</a>
</li>
<li class=“nav-item”>
<a class=“nav-link” href=“#”>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class=“container my-3”>
<h1 class=“text-center mb-4”>The Media Center</h1>
<div class=“row”>
<div class=“col-lg-8”>
<iframe src="https://pluto.tv/en/live-tv/pl