// Cloned by Luan Slankster on 24 Nov 2024 from World "Chat with GPT model" by Starter user
// Please leave this clone trail here.
// code snipits based on cloned world as well as https://huggingface.co/docs/api-inference/en/getting-started js section
// query multiple AI APIs from huggingface.co
// URLS:
URL_1 = "https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-32B-Instruct";
URL_2 = "https://api-inference.huggingface.co/models/microsoft/Phi-3.5-mini-instruct";
URL_3 = "https://api-inference.huggingface.co/models/HuggingFaceTB/SmolLM2-1.7B-Instruct";
URL_4 = "https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.3";
// default body is margin 0 and padding 0
// give it more whitespace:
$('body').css( "margin", "20px" );
$('body').css( "padding", "20px" );
document.write ( `
<style>
body {
background-color: #fc6a6f !important;
}
.title {
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
</style>
<h1 class="title"> See how different AI models generate a story on the same input! </h1>
<div style="width:30vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<h2> Intro </h2>
<p>This world querys four huggingFace AI API's. The Ai models are linked where their text is displayed.</p>
<p>For this page I have used my own Hugging Face token.</p>
<p>If this world no longer works it could be because the token is now invalid or the AI API's are no longer accepting input.</p>
<p> see <a href="https://huggingface.co/docs/api-inference/en/supported-models">this</a> for more information<p>
<p>This world uses Hugging Face's inference api's which are designed for prototyping and not for deployment (But its Free, Yippee).</p>
<p>This means sometimes the server respondes with a 503 error, in this event just wait a few minutes and prompt again.</p>
<p> Or it never works again</p>
</div>
<form style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<label for="genre_input">Enter a Genre:</label>
<input type="text" id="genre_input" value=""><br><br>
<label for="character_input">Enter a character:</label>
<input type="text" id="character_input" value=""><br><br>
<label for="location_input">Enter a location or language:</label>
<input type="text" id="location_input" value=""><br><br>
<label for="size_input">How many words?:</label>
<input type="number" id="size_input" value=50><br><br>
<input type="button" onclick= "sendData();" value="Submit" class=ab-normbutton >
</form>
<div>
<div style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<h3>Prompt: <a id=prompt></a></h3>
</div>
<div style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<a href = "https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct"><h3>Qwen/Qwen2.5-Coder-32B-Instruct</h3></a>
<div id=url1></div>
<p>Actual word count: <a id=url1_size></a></p>
</div>
<div style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<a href = "https://huggingface.co/microsoft/Phi-3.5-mini-instruct"><h3>microsoft/Phi-3.5-mini-instruct</h3></a>
<div id=url2></div>
<p>Actual word count: <a id=url2_size></a></p>
</div>
<div style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<a href = "https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B-Instruct"><h3>HuggingFaceTB/SmolLM2-1.7B-Instruct</h3></a>
<div id=url3></div>
<p>Actual word count: <a id=url3_size></a></p>
</div>
<div style="width:60vw; background-color:#ffd1d3; border: 1px solid black; margin:20; padding: 20px;">
<a href = "https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.3"><h3>mistralai/Mistral-7B-Instruct-v0.3</h3></a>
<div id=url4></div>
<p>Actual word count: <a id=url4_size></a></p>
</div>
</div>
<p> <i> Sometimes the AI models take a moment to return an answer<br> Sometimes the answer is just the prompt<br> Sometimes there is no answer at all</i> </p>
` );
// MH edit - inserting my own key
const hfkey = "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";
// make the request
async function query(URL,data) {
const response = await fetch( // API Fetch to the URL
URL,
{
method: "POST",
headers: {
'Authorization': "Bearer " + hfkey, // huggingface auth token
"Content-Type": "application/json",
},
body: JSON.stringify(data),
}
).catch((error) => { // log any errors from the API Fetch
console.log(error)
});
const result = await response.json();
return result;
}
// get the replies and assign the text to the correct sections
function sendData()
{
// get the values for the prompt
var genre = $("#genre_input").val();
var character = $("#character_input").val();
var location = $("#location_input").val();
var size = $("#size_input").val();
var prompt = "Write a " + genre + " story about " + character + " in " + location + " in " + size.toString() + " words."
$("#prompt").html(prompt); // write prompt to prompt section
query(URL_1,{"inputs": prompt}).then((response) => {
// remove the prompt, surounding "" symbols and replace newline characters with <br> for html
var out = JSON.stringify(response[0]["generated_text"]).replace(/^"(.*)"$/, '$1').replace(/\\n/g, "<br>").replace(prompt,"")
$("#url1").html(out);
// get the word count without the <br> characters
$("#url1_size").html(out.replace(/<br>/g," ").split(" ").length);
})
query(URL_2,{"inputs": prompt}).then((response) => {
var out = JSON.stringify(response[0]["generated_text"]).replace(/^"(.*)"$/, '$1').replace(/\\n/g, "<br>").replace(prompt,"")
$("#url2").html(out);
$("#url2_size").html(out.split(" ").length);
})
query(URL_3,{"inputs": prompt}).then((response) => {
var out = JSON.stringify(response[0]["generated_text"]).replace(/^"(.*)"$/, '$1').replace(/\\n/g, "<br>").replace(prompt,"")
$("#url3").html(out);
$("#url3_size").html(out.split(" ").length);
})
query(URL_4,{"inputs": prompt}).then((response) => {
var out = JSON.stringify(response[0]["generated_text"]).replace(/^"(.*)"$/, '$1').replace(/\\n/g, "<br>").replace(prompt,"")
$("#url4").html(out);
$("#url4_size").html(out.split(" ").length);
})
}